<template>
  <div>
    <div id="bigbox">
      <p class="p1">猜你喜欢</p>
        <div
          id="dahezi"
          >
          <div id="hezi"  v-for="(v, i) in this.$store.state.xihuan.arr"
          :key="i">
            <div class="boxa">
              <img :src="v.imgsrc" alt="" />
              <p class="p2">{{ v.title }}</p>
              <div>
                <span class="yuan">{{ v.fuhao }}</span
                ><span class="er">{{ v.price }}</span> &nbsp;<span
                  ><del>{{ v.del }}</del></span
                >
              </div>
            </div>
          </div>
        </div>
     
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
#bigbox {
  width: 3.42rem;
  margin: 0 auto;
  height: 4.2rem;
  /* background: pink; */
  margin-top: 0.13rem;
}

#dahezi{
  display: flex;
  flex-wrap:wrap ;
  justify-content: space-between;
}
.boxa {
  width: 1.05rem;
  height: 1.84rem;

}
.p1 {
  font-size: 0.2rem;
  font-weight: 600;
  height: 0.47rem;
  /* background: yellow; */
  line-height: 0.47rem;
}
.p2 {
  font-size: 0.14rem;
}
img {
  width: 1.05rem;
  height: 1.05rem;
}
.er {
  font-size: 0.20rem;
  font-weight: 600;
  color: #fb5a39;
}
.yuan {
  color: #fb5a39;
}
del {
  font-size: 0.12rem;
  color: rgb(160, 160, 160);
}
</style>